<template>
	<view class="margin-lr">
		<view class="margin-top-sm dflex-b">
			<image src="https://img.shihuashengyi.cn/static/images/empty/cart.jpg" class="border-radius-lg"
				style="width: 60rpx; height: 60rpx;" mode="" @click="user"></image>
			<view class="" style="width: 88%;">
				<view class="bg-main border-radius-lg dflex">
					<input type="text" value="" placeholder="输入关键词" class="w-full" style="    padding: 25rpx 25px;" />
					<text class="iconfont iconsousuo-01 bg-base border-radius-lg" @click="search"
						style="padding: 15rpx 55rpx;"></text>
				</view>
			</view>
		</view>
		<view class="margin-top">
			<scroll-view class="" scroll-x='true'>
				<view class="dflex padding-bottom">
					<view :class="{pitch: title_id === index}"
						v-for="(item,index) in [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="index" @click="pitch(index)"
						class="padding-lr ">
						<view class="pos-r padding-tb-sm" style="width: 73rpx;">
							全部
							<view class="badge ">
								2
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="goodsContent border-radius">
			<view class="goodsLeftList">
				<block v-for="(item, index) in [1,1,1,1,1,1]" :key="index">
					<view class="goodsItem margin-bottom-sm border-radius" @click="dongt(item.id)">
						<block v-for="(img, img_idx) in [1]" :key="img_idx">
							<image src="https://img.shihuashengyi.cn/static/images/empty/search.jpg" style="max-height: 380rpx;" class="flex1"
								mode="aspectFill"></image>
						</block>
						<view class="goodsName margin-top-sm clamp-2">Life is too short to give it a try</view>
						<view class="dflex-b padding-lr-sm margin-tb-sm">
							<view class="dflex" style="width: 60%; align-items: center;">
								<image src="https://img.shihuashengyi.cn/static/images/logo.png" mode="aspectFill"
									class="border-radius-c  fans-headimg "></image>
								<view class="clamp fans-color margin-left-xs" style="font-size: 23rpx;">Life</view>
							</view>
							<view class="dflex" style=" align-items: center;">
								<view class="iconfont iconshoucang-01">

								</view>
								<view class="clamp fans-color margin-left-xs" style="font-size: 23rpx;">234</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="goodsRightList">
				<block v-for="(item, index) in [1,1,1,1,1,1]" :key="index">
					<view class="goodsItem margin-bottom-sm border-radius" @click="dongt(item.id)">
						<block v-for="(img, img_idx) in [1]" :key="img_idx">
							<image src="https://img.shihuashengyi.cn/static/images/empty/empty.jpg" style="max-height: 380rpx;" class="flex1"
								mode="aspectFill">
							</image>
						</block>
						<view class="goodsName margin-top-sm clamp-2">Life is too short to give it a try</view>
						<view class="dflex-b padding-lr-sm margin-tb-sm">
							<view class="dflex" style="width: 60%; align-items: center;">
								<image src="https://img.shihuashengyi.cn/static/images/logo.png" mode="aspectFill"
									class="border-radius-c  fans-headimg "></image>
								<view class="clamp fans-color margin-left-xs" style="font-size: 23rpx;">Life</view>
							</view>
							<view class="dflex" style=" align-items: center;">
								<view class="iconfont iconshoucang-01">

								</view>
								<view class="clamp fans-color margin-left-xs" style="font-size: 23rpx;">234</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {notice_detail} from "../../js_sdk/apis/notice.js"
	export default {
		data() {
			return {
				title_id: 0
			};
		},
		
		methods: {
			// 跳转个人
			user() {
				uni.navigateTo({
					url: `/pages/shopping/user`
				});
			},
			// 搜索
			search() {
				this.$api.msg('搜索')
			},
			pitch(index) {
				this.title_id = index
			},
			// 跳转详情页
			dongt(options) {
				uni.navigateTo({
					url: `/pages/shopping/particulars?id=${options}`
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F5F5F5;
	}

	.pitch {
		color: #ff6a6c;
		font-weight: bold;
	}

	.tan-list-box {
		width: calc(100% / 2 - 20rpx);
		background-color: #fff;

		overflow: hidden;
	}

	.fans-headimg {
		width: 69rpx;
		height: 50rpx;
	}

	.scoll-wrapper {
		display: flex;
		align-items: flex-start;
	}

	.goodsContent {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.goodsLeftList,
	.goodsRightList {
		width: 50%;
		overflow: hidden;
	}

	.goodsLeftList {
		margin-right: 10rpx;
	}

	.goodsRightList {
		margin-left: 10rpx;
	}

	.goodsItem {
		overflow: hidden;
		background: #fff;
	}

	.goodsName {
		font-size: 28rpx;
		color: #2e2e2e;
		padding: 0 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goodsPrice {
		color: #ffac29;
		font-size: 24rpx;
		padding: 0 15rpx;
	}

	.goodsPrice image {
		width: 20rpx;
		height: 20rpx;
		padding: 0 5rpx;
	}
</style>
